<template>
	<view v-if="istrue">
		<div style="opacity: 0;" class="mark flex_items flex_center pos" v-if="ismark2" @click="close">
			<!-- <div class="cd_box" id="xuanzhun">
				<static :src="s2img" alt="" style="" class="cp">
				<span class="centerCircle"></span>
			</div> -->
		</div>
		<div style="opacity: 0;" class="mark flex_items flex_center pos" v-if="ismark3" @click="close">
			<div class="cd_box" id="xuanzhun">
				<img :src="s2img" alt="" style="" class="cp">
				<span class="centerCircle"></span>
			</div>
		</div>
		<!-- t1 -->
		<view class="p20 bgwhite">
			<scroll-view scroll-with-animation="true" :scroll-left="mleft" class="tags" scroll-x
				style="white-space: nowrap;width:100%;">
				<view v-for="(item,index) in points" :key="index" @click="chosetag(index)"
					style="border-radius: 8rpx;display: inline-block;"
					:class="['plr20','ptb10','mr30','flex_items','flex_center','f-center',curindex==index?'chose':'nochose']">
					<text class="f30" style="">{{item.Name}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="mt20 plr20 flex_start flex_items bgwhite">
			<view>
				<img :src="s2img" mode="" style="width: 300rpx;height: 240rpx;border-radius: 20rpx;"></img>
			</view>
			<view class="flex_column ml20">
				<text class="bold f34">{{points[curindex].Remark}}</text>
				<view class="mt30 flex_start flex_items f24" style="color: #ccc;">
					<text class="mr20">{{points[curindex].Intro}}</text>
					<!-- <view style="width: 1px;background: #ccc;height:40rpx" class="mr20"></view> -->
				</view>
				<text class="mt30 f32" style="color: #a9a6a6;">讲解人：{{points[curindex].Commentator}}</text>
			</view>
		</view>
		<!-- t3 -->
		<view class="mt20 bgwhite flex_between flex_items p20" style="display: none;">
			<view class="flex_between flex_items" style="width: 100%;">
				<view class="flex_start flex_items">
					<view class="flex_items flex_center p20"
						style="background: linear-gradient(0deg, #bdb7b7, #dedbdb);border-radius: 10rpx 0rpx 0rpx 10rpx;">
						<image @click.native="getbl" :src="music_play ? stop_img : start_img" mode="widthFix"
							style="width: 50rpx;height: 50rpx;">
						</image>
					</view>
					<text class="f24 ml20" style="color: #333;">{{btt}}</text>
				</view>
				<text class="f24 ml20" style="color: #333;">{{ltt}}</text>
			</view>

		</view>
		<!-- t5 -->
		<view v-for="(item,index) in anythings" :key="index">
			<view class="bold f32 mt30 plr20" style="color: #333;">{{item.Name}}</view>
			<view class="plr20">
				<view class="flex_column bgwhite mt30 plr20 ptb30" style="border-radius: 10rpx;">
					<view class="flex_between flex_items mt30" v-for="(item2,index2) in item.any" :key="index2">
						<view class="flex_column" style="width: 450rpx;">
							<view class="f24" style="color: #333;" @click="godetail(item2.Id)">{{item2.Title}}
							</view>
							<view class="mt20 pos">
								<div class="abs"
									style="background: red;left: 0;top: 11rpx;background: red;width: 50rpx;height: 50rpx;opacity: 0; display: none;"
									@click="godetail(item2.Id)">
								</div>
								<WzsAudio2 ref="goson" :key="datekey" ht='ht' :music="item2.ChineseVoice" title=" "
									room='yes' style="width: 100%;height: 30rpx;" :num='item2.Id'
									:musicplays="item2.music_play" :musicnum="item2.music_num" :findex="index"
									:sindex="index2" @dataChanged="handChange">
								</WzsAudio2>
							</view>
						</view>
						<image v-if="item2.CoverImg!=null" :src="item2.CoverImg" alt="" mode="aspectFill"
							style="width: 200rpx;height: 120rpx;border-radius: 10rpx;" @click="godetail(item2.Id)">
						</image>
						<image v-else src="https://yqjystp.monkeysoftware.cn/upload/sound/202109271457542133.jpg" alt=""
							mode="aspectFill" style="width: 200rpx;height: 120rpx;border-radius: 10rpx;"
							@click="godetail(item2.Id)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		roominfo,
		Getbinfo,
		GetArticledetail
	} from '@/api/api.js';
	import WzsAudio2 from '@/components/audios/index2.vue'
	export default {
		data() {
			return {
				points: [],
				curindex: 0,
				s2img: "",
				sximg: "",
				climg: "",
				packet_used2: "",
				istrue: true,
				anythings: [],
				num: 0,
				num2: 0,
				datekey: Date.now(),
				isok: 0,
				ismark: false,
				list: [],
				list2: [],
				goindex: '',
				goindex2: '',
				blues: [],
				cans: 0,
				isgo: 0,
				playing: true,
				ismark2: false,
				AUDIO: '',
				playsrc: "http://music.163.com/song/media/outer/url?id=25906124.mp3",
				music_play: false,
				btt: "点击搜索蓝牙语音",
				ltt: "",
				start_img: "",
				stop_img: "",
				ioIndex: null,
				itIndex: null,
			}
		},
		components: {
			WzsAudio2
		},
		onLoad(options) {
			this.getData(options.id)
		},
		mounted(options) {

		},
		onShow() {
			uni.removeStorageSync('nowtime')
		},
		methods: {
			handChange(e, io, it, num) {
				if (this.ioIndex == null && this.itIndex == null) {
					this.ioIndex = io;
					this.itIndex = it;
					this.anythings[io].any[it].music_play = e;
				} else if (this.ioIndex == io && this.itIndex == it) {
					this.anythings[io].any[it].music_play = e;
					this.ioIndex = io;
					this.itIndex = it;
				} else {
					console.log(this.anythings[io].any.length)
					console.log(this.anythings.length)
					console.log(io)
					console.log(it)
					if (it >= this.anythings[io].any.length) {
						it = 0;
						io = 0;
						console.log('any')
					}
					// if (io > this.anythings.length) {
					// 	io = 0;
					// 	it = 0;
					// 	console.log('anyth')
					// }
					this.anythings[io].any[it].music_play = e;
					this.anythings[this.ioIndex].any[this.itIndex].music_play = false;
					this.anythings[this.ioIndex].any[this.itIndex].music_num = num;
					this.ioIndex = io;
					this.itIndex = it;
				}
			},
			getData(id) {
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				roominfo({
					// 3307
					ParentId: id,
					layers: 1,
				}).then(res => {
					console.log(res)
					if (res.Data.length == 0) {
						uni.showToast({
							title: "--暂无信息内容--",
							icon: 'none',
							duration: 1200
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
						return false
					}
					this.points = res.Data
					this.s2img = res.Data[0].ImgUrl
					this.getlastinfo(res.Data[0].Id)
				})
			},
			getlastinfo(id) {
				roominfo({
					ParentId: id,
					layers: 1,
				}).then(res => {
					this.anythings = res.Data;
					this.num = res.Data.length
					this.getblooth()
				})
			},
			getblooth() {
				if (this.num2 == this.anythings.length) {
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].length != 0) {
							this.list[i].forEach((item, index) => {
								this.list2.push(item)
							})
						}
					}
					this.istrue = true
					return false
				}
				Getbinfo({
					ParentArticleCategoryId: this.anythings[this.num2].Id
				}).then(res => {
					this.anythings[this.num2].any = []
					this.list.push(res.Data)
					res.Data.forEach((item, index) => {
						item.music_play = false;
						item.music_num = 0;
						this.anythings[this.num2].any.push(item)
					})
					this.num2 += 1
					this.getblooth();
					console.log(this.anythings)
				})
			},
			godetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '../pointdetail/index?Id=' + id + "&room=1"
				})
			},
			chosetag(index) {
				this.curindex = index
				this.s2img = this.points[index].ImgUrl
				this.list = []
				this.list2 = []
				this.anythings = []
				this.num2 = 0
				this.num = 0
				this.getlastinfo(this.points[index].Id)
			},
			close() {
				if (this.ismark3) {
					this.ismark3 = false
					this.AUDIO.pause()
				} else {
					this.$refs.goson[this.goindex2].clickAudio()
					this.ismark = false
					this.ismark2 = false
				}
			},
			goeash(data) {
				this.ismark = data
			},
			gochold(id) {
				let that = this
				if (that.goindex2 != '' && that.goindex2 != '0') {
					that.$refs.goson[that.goindex2].clickAudio()
				}
				that.list2.forEach((item, index) => {
					if (item.Id == id) {
						that.goindex = index
						that.goindex2 = index
						if (index == 0) {
							that.ismark2 = true
						}
						that.$refs.goson[that.goindex].clickAudio()
					}
				})

			},
			getbl() {
				if (this.music_play) {
					uni.stopBluetoothDevicesDiscovery()
					this.btt = '点击搜索蓝牙语音'
					this.ltt = ''
					this.music_play = false
					this.AUDIO.volume = 0
					this.AUDIO.pause()
					return false
				}
				Getbinfo({
					ArticleCategoryId: 0
				}).then(res => {
					this.blues = res.Data;
					this.openBluetoothAdapter()
				})
			},
			//  初始化蓝牙模块
			openBluetoothAdapter() {
				uni.openBluetoothAdapter({
					success: res => {
						console.log('openBluetoothAdapter success', res);
						this.btt = '正在搜索蓝牙语音...'
						this.music_play = true
						this.startBluetoothDevicesDiscovery();
					},
					fail: res => {
						console.log(res)
						if (res.errCode === 10001) {
							uni.hideLoading()
							uni.showToast({
								title: '请打开蓝牙开始体验',
								icon: 'none',
								duration: 2000
							});
							// uni.onBluetoothAdapterStateChange(res => {
							// 	console.log('onBluetoothAdapterStateChange', res);
							// 	if (res.available) {
							// 		this.btt = '正在搜索蓝牙语音...'
							// 		this.music_play = true
							// 		this.startBluetoothDevicesDiscovery();
							// 	}
							// });
						}
					}
				});

			},
			// 开始蓝牙搜索
			startBluetoothDevicesDiscovery() {
				console.log('开始搜索--')
				uni.startBluetoothDevicesDiscovery({
					allowDuplicatesKey: true,
					success: res => {
						console.log('开始搜索到位--', res);
						this.onBluetoothDeviceFound();
					}
				});

			},
			// 停止蓝牙搜索
			stopBluetoothDevicesDiscovery() {
				uni.stopBluetoothDevicesDiscovery();
				// this.discoveryStarted = false;
			},
			// 关闭蓝牙信标
			stopSearchBeacon() {
				uni.stopBeaconDiscovery({
					success: function() {
						console.log('关闭蓝牙成功')
					}
				})
			},
			// 监听蓝牙设备列表
			onBluetoothDeviceFound() {
				let that = this
				// that.blues[0].BluetoothId = '72:64:21:06:00:34'
				if (that.isgo == 0) {
					uni.onBluetoothDeviceFound(res => {
						console.log(res)
						console.log('监听列表')
						if (res.devices[0].name == 'RDLCard' && res.devices[0].RSSI > -70 && that.tookid != res
							.devices[0].deviceId) {
							that.tookid = res.devices[0].deviceId
							console.log('找到啦')
						} else {
							console.log('寻找失败')
							return
						}
						if (that.cans > that.blues.length - 1) {
							that.cans = 0
						}
						that.xun(that.tookid)

					});
				}
			},
			xun(tookid) {
				let that = this
				if (that.ismark) {
					return false
				}
				for (let i = 0; i < that.blues.length; i++) {
					// console.log(that.blues[that.cans].BluetoothId)
					if (tookid == that.blues[i].BluetoothId) {
						console.log('接口找到啦')
						console.log(that.blues[i])
						if (that.AUDIO != '') {
							that.AUDIO.volume = 0
							that.AUDIO.pause()
						}
						GetArticledetail({
							Id: that.blues[i].Id
						}).then(res => {
							console.log(res)
							that.AUDIO = uni.createInnerAudioContext()
							that.AUDIO.autoplay = true;
							that.ltt = res.Data.Title
							that.AUDIO.src = res.Data.ChineseVoice
							that.AUDIO.volume = 0.9
							that.AUDIO.play()
						})
					}
				}
				that.cans += 1

			},
			// 蓝牙获取详情
			// getbluedetail(name) {
			// 	console.log(12123312)
			// 	console.log(name)
			// 	getbluedetail({
			// 		BluetoothId: name,
			// 	}).then(res => {
			// 		console.log(res)
			// 	})
			// },
			// 建立连接
			createBLEConnection(device) {
				const deviceId = device.deviceId;
				let that = this
				uni.createBLEConnection({
					deviceId,
					success: res => {
						console.log('建立蓝牙连接--')
						console.log(res)
						this.deviceId = deviceId;
						this.getBLEDeviceServices(deviceId);
					}
				});
				this.stopBluetoothDevicesDiscovery();
			},
			// 获取蓝牙服务
			getBLEDeviceServices(deviceId) {
				uni.getBLEDeviceServices({
					deviceId,
					success: res => {
						console.log('获取蓝牙服务--')
						console.log(res)
						for (let i = 0; i < res.services.length; i++) {
							if (res.services[i].isPrimary) {
								this.getBLEDeviceCharacteristics(deviceId, res.services[i].uuid);
								return;
							}
						}
					}
				});

			},
			// 获取蓝牙特征值
			getBLEDeviceCharacteristics(deviceId, serviceId) {
				uni.getBLEDeviceCharacteristics({
					deviceId,
					serviceId,
					success: res => {
						console.log('获取蓝牙特征');
						console.log(res)
						for (let i = 0; i < res.characteristics.length; i++) {
							let item = res.characteristics[i];
							console.log(item.properties)
							if (item.properties.read) {
								uni.readBLECharacteristicValue({
									deviceId,
									serviceId,
									characteristicId: item.uuid
								});
							}
							if (item.properties.write) {
								this.deviceId = deviceId;
								this.serviceId = serviceId;
								this.characteristicId = item.uuid;
							}
							if (item.properties.notify || item.properties.indicate) {
								uni.notifyBLECharacteristicValueChange({
									deviceId,
									serviceId,
									characteristicId: item.uuid,
									state: true
								});
							}
						}
					},
					fail(res) {
						console.error('getBLEDeviceCharacteristics', res);
					}
				});
				uni.onBLECharacteristicValueChange(characteristic => {
					if (!this.connect) {
						return
					}
					//自己的操作
					// let value = util.ab2hex(characteristic.value);

				});
				uni.onBLEConnectionStateChange(res => {
					// 该方法回调中可以用于处理连接意外断开等异常情况
					console.log(`device ${res.deviceId} state has changed, connected: ${res.connected}`);
					this.connect = res.connected;
					if (!this.connect) {
						this.discoveryStarted = false;
						//this.finishStatus = true;
						clearInterval(this.interval);
						this.openBluetoothAdapter();
					}

				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5 !important;
	}

	.chose {
		background: linear-gradient(0deg, #E74337, #B3291F);
		color: #fff;
	}

	.nochose {
		color: #666666;
		background: none;
	}

	.mark {
		position: fixed;
		height: 500rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		left: 0%;
		right: 0%;
		top: 0;
		width: 100%;
		height: 100vh;
		font-size: 26rpx;
		text-align: center;
		box-shadow: 2px -3px 100px -5px #FFFFFF;
		z-index: 20;
	}

	.cd_box {
		margin: 0 auto;
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		top: 25%;
		text-align: center;
	}

	.cp {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
		border-radius: 50%;
		border: 5px solid #fff;
	}

	.centerCircle {
		width: 30px;
		height: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: #D67513;
		border: 5px solid #ccc;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
			/* 初始角度为0 */
		}

		to {
			transform: rotate(360deg);
			/* 最终角度为360度，即一周 */
		}
	}

	#xuanzhun {
		animation: rotate 2s linear infinite;
	}
</style>